<div [ngSwitch]="value.type">

  <div *ngSwitchCase="'Message'">{{value.data.message}}</div>

  <div *ngSwitchCase="'EncryptedMessage'" class="encrypted-message">
    <mat-icon class="mr-16 s-16 lock">lock</mat-icon>
    <div *ngIf="decryptedMessage">{{decryptedMessage}}</div>
    <div *ngIf="!decryptedMessage">
      <mat-form-field>
        <input matInput [(ngModel)]="pin" type="password" name="pin" placeholder="{{ 'input_pin' | i18n }}">
      </mat-form-field>
      <button type="submit"
              class="mr-8"
              mat-button
              color="primary"
              (click)="decrypt($event)">
        {{ "decrypt" | i18n }}
      </button>
    </div>
  </div>

  <div *ngSwitchCase="'AccountAddress'">
    <a [routerLink]="['/account', convertAddressToNumericId(value.data)]">{{value.data}}</a>
  </div>

  <div *ngSwitchCase="'AccountId'">
    <a [routerLink]="['/account', value.data]">{{value.data}}</a>
  </div>

  <div *ngSwitchCase="'BlockId'">
    <a [routerLink]="['/blocks/block', value.data]">{{value.data}}</a>
  </div>

  <div *ngSwitchCase="'Asset'">
    <table>
      <tr>
        <th>{{ 'asset_name' | i18n }}</th>
        <th>{{ 'quantity' | i18n }} (QNT)</th>
      </tr>
      <tr *ngFor="let v of value.data">
        <td>{{v.asset}}</td>
        <td>{{v.balanceQNT || v.unconfirmedBalanceQNT}}</td>
      </tr>
    </table>
  </div>

  <div *ngSwitchCase="'AssetTransfer'">
    <div>
      <label class="mr-8">{{'asset' | i18n}}:</label>
      <span>{{value.data.asset}}</span>
    </div>
    <div>
      <label class="mr-8">{{'quantity' | i18n}} (QNT):</label>
      <span>{{value.data.quantityQNT}}</span>
    </div>
  </div>

  <div *ngSwitchCase="'Date'">{{value.data | date:'MMM d, y, h:mm:ss'}}</div>

  <div *ngSwitchCase="'AccountInfo'">{{value.data.name}} - {{value.data.description}}</div>

  <div *ngSwitchCase="'MultiSameOutCreation'">
    <label>{{'recipients' | i18n}}</label>
    <div class="chip-list">
      <span *ngFor="let accountId of value.data.recipients" class="chip">
        <a [routerLink]="['/account', accountId]">{{convertNumericIdToAddress(accountId)}}</a>
      </span>
    </div>
  </div>

  <div *ngSwitchCase="'MultiOutCreation'">
    <label>{{'payments' | i18n}}</label>
    <div class="chip-list">
      <span *ngFor="let payment of value.data.recipients" class="chip">
        <a [routerLink]="['/account', payment[0]]">{{convertNumericIdToAddress(payment[0])}}
          ({{convertNQTStringToNumber(payment[1])}} BURST)</a>
      </span>
    </div>
  </div>

  <div *ngSwitchDefault>{{value.data | i18n}}</div>
</div>
